<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<title>Sample</title>
</head>

<body>
<div id="obj" style="width:50px; height:50px; background-color:#DC574E; position:absolute; left:135px; top:100px;">Drag me</div>
<script>
var width, height, rotation;
document.body.onload = initEvent;
function initEvent() {
	var obj = document.getElementById("obj");
    obj.addEventListener(
            "gesturechange", onGestureChange, false);
	obj.addEventListener(
            "gestureend", onGestureEnd, false);
}

function onGestureChange(evt) {
   evt.preventDefault(); // 取消默认的滚动事件
   var node = evt.currentTarget;
   node.style.width = (width * evt.scale) + "px";
   node.style.height = (height * evt.scale) + "px";
   node.style.webkitTransform = "rotate(" + ((rotation + evt.rotation) % 360) + "deg)";
}

function onGestureEnd(evt) {
  width *= evt.scale;
  height *= evt.scale;
  rotation = (rotation + evt.rotation) % 360;
}
</script>
</body>
</html>
